<template>
    <div class="screen_body">
        <el-button style="width: 88px;height: 40px;" :color="action ? props.actionColor : props.color" dark round
            @click="handleClick" :data-title="props.text">
            {{ isSubclass?classTxt:props.text }}
            <el-icon class="el-icon--right" v-if="props.cardShow">
                <ArrowDown />
            </el-icon>
        </el-button>
        <SeriesCard class="card" v-if="props.cardShow && cardShow" :data="props.data" @iClick="handleItemClick" />
    </div>
</template>


<script setup>
import { ref, onMounted, watch, watchEffect } from 'vue'
// import { useSeriesStore } from '@/stores/SeriesStore';

import { ArrowDown } from '@element-plus/icons-vue'

// const seriesStore = useSeriesStore()
const cardShow = ref(false)
const first = ref(false)
const classTxt = ref('')
const isSubclass = ref(false)

const handleClick = () => {
    cardShow.value = !cardShow.value
}

const handleItemClick = (e)=>{
    cardShow.value = false;
    console.log(e);
    classTxt.value = e;
    isSubclass.value = true;
}


onMounted(() => {
    // cardShow.value =  props.text==seriesStore.actionTxt
})

const props = defineProps({
    text: String,
    info: Array,
    action: Boolean,
    cardShow: {
        type: Boolean,
        default: false
    },
    color: {
        type: String,
        default: '#F5F5F5'
    },
    actionColor: {
        type: String,
        default: '#111111'
    },
    data:Array,
    classTxt:String
})

watch(() => {
    // if (!(props.text == seriesStore.actionTxt)) {
    //     cardShow.value = false
    //     isSubclass.value = false
    // }
    if (!(props.text == props.classTxt)) {
        cardShow.value = false
        isSubclass.value = false
    }
})
</script>


<style scoped lang="scss">
.screen_body {
    position: relative;

    & .card {
        position: absolute;
        top: 46px
    }
}
</style>